<template>
  <div>
    <!--<div class="address">
      <div>
        <p>您当前所在位置</p>
        <router-link to="/" class="link">团订-加工厂-大产品详情</router-link>
      </div>
    </div>-->
    <div class="roder-details">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="部门产品列表">
          <div class="info">
            <h4 class="title1" style="font-weight: 700;width: auto;">产品列表</h4>
            <div class="table-css">
              <a-table class="table1" :row-selection="rowSelection" lign="center" :columns="productList"
                       :loding="true"
                       :pagination="false"
                       @change="handleTableChange"
                       :data-source="smallproductlist">
                <span slot="departDetail" slot-scope="text, record">
                  <a @click="departFunc(record.id)">查看详情</a>
                </span>
                <span slot="proAction" slot-scope="text, record">
                  <a @click="$router.push({path:'/orderCenter/FactorySmallProductDetail',query:{order:record.orderSn,
                  product:record.productId,small:record.id}})">查看详情</a>
                </span>
              </a-table>
            </div>
          </div>
          <!--干啥？选择供应商-->
          <a-modal
            title="部门信息"
            v-model:visible="visible3"
            :confirm-loading="confirmLoading"
            @ok="visible3 = false"
          >
            <p>部门名称：{{ departDetail.departName }}</p>
            <p>收货人：{{ departDetail.consignee }}</p>
            <p>联系电话：{{ departDetail.phone }}</p>
            <p>收货地址：{{ departDetail.address }}</p>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="3" tab="批次状态">
          <div class="info">
            <h4 class="title1" style="font-weight: 700;width: auto;">订单批次</h4>
            <!--table区域-begin-->
            <div>
              <a-table
                style="width: 100%"
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="packingList"
                :pagination="ipagination"
                :loading="loading"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                class="j-table-force-nowrap"
                @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                  <div v-html="text"></div>
                </template>

                <template slot="imgSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                  <img v-else :src="getImgView(text)" height="30px" alt=""
                       style="max-width:80px;font-size: 12px;font-style: italic;"/>
                </template>
                <template slot="fileSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                  <a-button
                    v-else
                    :ghost="true"
                    type="primary"
                    icon="download"
                    size="small"
                    @click="uploadFile(text)">
                    下载
                  </a-button>
                </template>

                <span slot="action" slot-scope="text, record">
                    <a-menu-item>
                    <a
                      @click="$router.push({path:'/orderCenter/UpdatePacking',query:{packing:record.id,order:$route.query.order,check:'false'}})"
                      style="margin-left: 8px;">查看批次</a>
                </a-menu-item>
                  </span>
              </a-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="售后记录跟踪">
          <div class="info">
            <h4 class="title1" style="font-weight: 700;width: auto;">售后订单列表</h4>
            <div class="table-css">
              <a-table class="table1" :row-selection="rowSelection" lign="center" :columns="afterTitle"
                       :loding="true"
                       :pagination="pagination"
                       @change="handleTableChange"
                       :data-source="afterlist">
                <router-link slot="k6" slot-scope="text,record"
                             :to="{path:'/orderCenter/AfterSaleGroupFactory',query:{id:record.id,after:record.afterCode,orderSn:$route.query.order}}"
                             style="color:#C49D18">查看详情
                </router-link>
              </a-table>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>

    </div>

  </div>
</template>

<script>
import {getAction} from "../../api/manage";
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
// @ is an alias to /src
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

// 售后列表表头
const afterTitle = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '售后单号',
    align: "center",
    dataIndex: 'afterCode'
  },
  {
    title: '申请时间',
    align: "center",
    dataIndex: 'createTime'
  },
  {
    title: '售后类型',
    align: "center",
    dataIndex: 'afterSalesType',
    customRender: function (text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    }
  },
  {
    title: '售后金额(元)',
    align: "center",
    dataIndex: 'afterPrice'
  },
  /*{
    title: '状态',
    align: "center",
    dataIndex: 'status'
  },*/
  {
    title: '操作',
    align: "center",
    scopedSlots: {
      customRender: 'k6'
    }
  }
];

// 小产品列表表头
const productList = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '产品编号',
    align: "center",
    dataIndex: 'code'
  },
  /*{
    title: '产品数量',
    align: "center",
    dataIndex: 'numbers'
  },*/
  {
    title: '品类',
    align: "center",
    dataIndex: 'plName'
  },
  {
    title: '品类编号',
    align: "center",
    dataIndex: 'pingleiCode'
  },
  {
    title: '部门信息',
    align: "center",
    scopedSlots: {customRender: 'departDetail'}
  },
  {
    title: '操作',
    align: "center",
    scopedSlots: {customRender: 'proAction'}
  },
]

export default {
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      visible3: false, // 部门弹框
      packingList: [],    // 订单批次列表
      smallproductlist: [], // 小产品列表
      departDetail: {}, // 部门详情
      url: {
        list: '/orderCenter/listPacking', // 团订订单批次
        listPacking: '/orderCenter/listPacking', // 团订订单批次
        listTeamAfter: '/orderCenter/listTeamAfter', // 售后订单列表
        listSmallProByProduct: '/OrderFactoryController/listSmallProByProduct', // 小产品列表
        depart: '/OrderFactoryController/departmentDetailFromSmallPro', // 部门详情
      },
      afterTitle,
      productList,
      afterlist: [], // 售后订单列表
      // 分页
      pagination: {
        current: '',
        total: 0,
        pageSize: 10,//每页中显示10条数据
      },
      locale,
      selectedRowKeys: [],
      // 订单批次表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '批次名称',
          align: "center",
          dataIndex: 'batchName'
        },
        {
          title: '批次人数',
          align: "center",
          dataIndex: 'personnum'
          /* customRender: (text) => {
             //字典值替换通用方法
             return filterDictTextByCache('sex', text);
           }*/
        },
        {
          title: '部门名称',
          align: "center",
          dataIndex: 'departName'
        },
        {
          title: '收货地址',
          align: "center",
          dataIndex: 'address'
        },
        {
          title: '箱数',
          align: "center",
          dataIndex: 'boxnum'
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status',
          customRender: function (text) {
            if (text == '0') {
              return '待发货'
            } else if (text == '1') {
              return '已发货'
            } else if (text == '2') {
              return '已收货'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  created() {
    this.getAfterList()
    this.listSmallProByProductFunc()
    this.getpackintListFunc()
  },
  methods: {

    // 打开弹框
    departFunc(id) {
      this.visible3 = true
      getAction(this.url.depart, {
        'smallproid': id
      }).then(res => {
        if (res.code == '0') {
          this.departDetail = res.data
        }
      })
    },
    /**
     * 获取订单批次列表
     * @author zxl
     * @since 20201116
     */
    getpackintListFunc() {
      getAction(this.url.listPacking, {
        orderSn: this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.packingList = res.data
        }
      })
    },

    /**
     * 获取小产品列表
     */
    listSmallProByProductFunc() {
      getAction(this.url.listSmallProByProduct, {
        'productId': this.$route.query.product
      }).then(res => {
        if (res.code == '200') {
          this.smallproductlist = res.result.records
        }
      })
    },

    // 返回上一个界面
    goback() {
      this.$router.go(-1)
    },

    // 获取团订订单售后记录列表
    getAfterList() {
      getAction(this.url.listTeamAfter, {
        'orderSn': this.$route.query.order,
        'orderType': 1
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

    // 分页器方法
    handleTableChange(page, pageSize) {
      getAction(this.url.listTeamAfter, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'orderSn': this.$route.query.order,
        'orderType': 0
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    }
  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}

.b3 {
  background-color: rgba(242, 242, 242, 1);
  width: 90px;
  height: 36px;
  color: #444;
  font-size: 15px;
  line-height: 36px;
  text-align: center;
  display: block;
}
</style>
